<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for="(item,index) in images" :key="index">
      <img :src="item" alt="">
    </swiper-slide>
    <!-- 分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
  </swiper>
</template>

<script>
export default {
    name: 'MySwiper',
    props:{
      images:{
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
        mySwiper: null,
        swiperOptions: {
          // 指定分页器元素
          pagination: {
            el: '.swiper-pagination'
          },
          // 指定左右切换按钮元素
          // navigation: {
          //   nextEl: '.swiper-button-next',
          //   prevEl: '.swiper-button-prev',
          // },
          // 循环切换
          loop: true,
          //自动滑切换
          autoplay: {
            delay: 1000,//1秒切换一次
            disableOnInteraction: false,//手动切换后，不会禁止自动切换
          },
        }
      }
    },
    mounted() {
      this.mySwiper = this.$refs.mySwiper.$swiper;
    }
  }
</script>
<style lang="less" scoped>
img{
  width: 100%;
}
</style>